<template>
    <div>
        <!-- 导航栏 -->
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>文章管理></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格 -->
        <div>
            <el-card class="box-card">
                <div>
                    <div style="float:left">
                        <el-button @click="fabuwenzhang()" type="success">发布文章</el-button>
                        <el-select v-model="value" style="width:135px" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="value2" style="width:250px"></el-input>
                        <el-button type="success" @click="conditionSearch()">查询</el-button>
                        <el-button type="success" @click="chongzhi()">重置</el-button>
                    </div>
                <el-table
                :data="tableData"
                height="500px"
                stripe
                style="width: 100%">
                <el-table-column
                type="index"
                >
                </el-table-column>
                <el-table-column
                prop="title"
                show-overflow-tooltip
                label="标题">
                </el-table-column>
                <el-table-column
                prop="announcer"
                label="发布者">
                </el-table-column>
                <el-table-column
                prop="announcerId"
                label="发布者ID">
                </el-table-column>
                <el-table-column
                prop="favorites"
                label="观看次数">
                </el-table-column>
                <!-- <el-table-column
                prop="messageInfo"
                show-overflow-tooltip
                label="描述信息">
                </el-table-column> -->
                <el-table-column
                prop="photoAdd"
                show-overflow-tooltip
                label="插图">
                <template slot-scope="scope">
                    <img :src="scope.row.photoAdd" style="width:56px;height:56px" alt="img">
                </template>
                </el-table-column>
                <el-table-column
                prop="status"
                label="类型">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status==0">首页资讯</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status==1">校园资讯</el-tag>
                    <el-tag type="success" v-else>最新资讯</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                prop="releaseTime"
                show-overflow-tooltip
                label="发布时间">
                </el-table-column>
                <el-table-column
                prop="modifiedTime"
                show-overflow-tooltip
                label="最后修改时间">
                </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="text" size="small">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
                </div>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            </el-card>
            <!-- 编辑 -->
            <el-dialog
            title="编辑"
            :visible.sync="centerDialogVisible"
            width="45%"
            height="450px"
            center>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.title" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="发布者">
                    <el-input v-model="form.announcer" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="发布者ID">
                    <el-input v-model="form.announcerId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="观看次数">
                    <el-input v-model="form.favorites" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="描述信息">
                    <el-input v-model="form.messageInfo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="图片地址">
                    <el-input v-model="form.photoAdd" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-input v-model="form.releaseTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="修改时间">
                    <el-input v-model="form.modifiedTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.status" placeholder="请选择">
                    <el-option label="首页文章" value="0"></el-option>
                    <el-option label="校园资讯" value="1"></el-option>
                    <el-option label="最新资讯" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitData()">提交</el-button>
            </span>
            </el-dialog>
            <el-dialog
            title="发布文章"
            :visible.sync="centerDialogVisible2"
            width="90%"
           
            center>
               <el-form :model="noticeForm"
                   :rules="noticeFormRules"
                   ref="noticeFormRef">
            <el-form-item label="通知标题："
                          prop="title"
                          label-width="100px">
              <el-input v-model="noticeForm.title"
                        placeholder="请输入通知标题"
                        clearable
                        style="width:350px"></el-input>
                

            </el-form-item>
            <el-form-item label="通知类型："
                          prop="status"
                          label-width="100px">
                    <el-select v-model="noticeForm.status" style="width:150px" placeholder="请选择输入状态">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="通知内容："
                          prop="messageInfo"
                          style="height:300px"
                          label-width="100px">
              <quill-editor v-model="noticeForm.messageInfo" style="height:250px"></quill-editor>
            </el-form-item>
            <el-form-item label="通知图片："
                          prop="photoAdd"
                          label-width="100px">
              <el-upload class="upload-demo"
                         action="http://39.108.11.93:8889/message/uploadPhoto"
                         multiple
                         :limit="1"
                         :on-success="uploadSuccess"
                         :file-list="fileList">
                <el-button size="small"  type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item style="text-align:right">
                <el-button type="primary" @click="centerDialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="insertNo()">发布</el-button>
            </el-form-item>
          </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    name:'Message',
    comments:{
       
    },
    data(){
        return{
            tableData: [],
            total:10,
            page:1,
            count:10,
            centerDialogVisible:false,
            centerDialogVisible2:false,
            form:{},
            options2:[
                {value: '0',label: '首页咨讯'},
                {value: '1',label: '校园资讯'},
                {value: '2',label: '最新资讯'},
            ],
            noticeForm:{
                "announcer": localStorage.getItem('username'),
                "announcerId": localStorage.getItem('id'),
                "favorites": 0,
                "messageInfo": "",
                "photoAdd": "",
                "status": '',
                "title": ""
            },
            fileList: [],

            noticeFormRules: {
                title: [
                { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                photoAdd: [
                { required: true, message: '图片不能为空', trigger: 'blur' }
                ],
                messageInfo: [
                { required: true, message: '通知内容不能为空', trigger: 'blur' }
                ]
            },
            noticeList: [],
            options:[
                {value: 'announcer',label: '发布者'},
                {value: 'title',label: '标题'},
                {value: '0',label: '首页咨讯'},
                {value: '1',label: '校园资讯'},
                {value: '2',label: '最新资讯'},
            ],
            value:'',
            value2:'',
            editor1:null,
            editor2:null,
            editorContent:'',
            msg:'请输入内容',
        }
    },
    created(){
        this.getMessageList()
    },
    mounted(){
        // this.$nextTick(function() {
        //     this.createEditor()
        // })
        // this.createEditor()
    },
    methods:{
        getMessageList(){
            var _this=this
            var url='http://taruinfo.work:8088/getMessageByList?page='+_this.page+'&pageCount='+_this.count
            _this.$axios.get(url).then(function(res){
                console.log(res.data)
                if(res.data !=''){
                  _this.total=res.data.total
                  _this.tableData=res.data.records
                }else{
                    console.log('获取消息信息失败')
                }
            })
        },
        handleSizeChange(val){
            this.count=val
            this.getMessageList()
        },
        handleCurrentChange(val){
            this.page=val
            this.getMessageList()
        },
        editData(row) {
            console.log(row)
            this.form=row
            this.centerDialogVisible=true
        },
        commitData(){
            var _this=this
            var url='http://taruinfo.work:8088/updateAndSelectByID'
            _this.$axios.put(url,_this.form).then(function(res){
                if(res.data.code==200){
                    _this.$message({
                      message: '更新成功',
                      type: 'success'
                    })
                    _this.centerDialogVisible=false
                    _this.getMessageList()
                }else{
                   _this.$message({
                      message: '更新失败',
                      type: 'error'
                    })
                   _this.centerDialogVisible=false 
                }
            })
        },
        deleteData(row){
            var _this=this
            var url='http://taruinfo.work:8088/deleteMessage?id='+row.id
            _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                _this.$axios.delete(url).then(function(res){
                if(res.data.code==200){
                    _this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    _this.getMessageList()
                }else{
                    _this.$message({
                        type: 'error',
                        message: '删除失败!'
                    })
                }
            })  
            }).catch(() => {
                _this.$message({
                    type: 'info',
                    message: '已取消删除'
                })         
            })
        console.log(row)
        },
        conditionSearch(){
            var _this=this
            if(_this.value == 'announcer'){
                if(_this.value2 !=''){
                    var url='http://taruinfo.work:8088/likeMessageByLists?announcer='+_this.value2+'&page=1&pageCount=10'
                    _this.$axios.get(url).then(function(res){
                        // console.log(res.data)
                        if(res.data !=''){
                        _this.total=res.data.data.total
                        _this.tableData=res.data.data.records
                        _this.value=''
                        _this.value2=''
                        }else{
                            _this.$message({
                                message: '查询失败',
                                type: 'error'
                            })
                        }
                    })               
                } else{
                   _this.$message({
                        message: '发布者不能为空',
                        type: 'warning'
                    }) 
                }       
            }else if(_this.value =='title'){
                if(_this.value2!=''){
                    var url='http://taruinfo.work:8088/likeMessageByLists?current=1&size=10&title='+_this.value2
                    _this.$axios.get(url).then(function(res){
                        // console.log(res.data)
                        if(res.data !=''){
                        _this.total=res.data.data.total
                        _this.tableData=res.data.data.records
                        _this.value=''
                        _this.value2=''
                        }else{
                            _this.$message({
                                message: '获取失败',
                                type: 'error'
                            })
                        }
                    })
                }else{
                   _this.$message({
                        message: '标题不能为空',
                        type: 'warn'
                    })  
                }
            }else if(_this.value == '0' || '1' || '2'){
                var url='http://taruinfo.work:8088/getmmessageByLists?page=1&pageCount=10&status='+_this.value
                _this.$axios.get(url).then(function(res){
                    // console.log(res.data)
                    if(res.data !=''){
                    _this.total=res.data.data.total
                    _this.tableData=res.data.data.records
                    _this.value=''
                    _this.value2=''
                    }else{
                        _this.$message({
                            message: '获取失败',
                            type: 'error'
                        })
                    }
                })
            }
            else{
                _this.getMessageList()
            }
            // var _this=this
            // var url='http://taruinfo.work:8088/getMessageByList?announcer='+_this.announcer+'page=1&pageCount=10&status='+_this.status
            // _this.$axios.get(url).then(function(res){
            //     console.log(res.data)
            //     if(res.data !=''){
            //       _this.total=res.data.total
            //       _this.tableData=res.data.records
            //     }else{
            //         console.log('获取消息信息失败')
            //     }
            // })        
        },
        getphotoAdd(scope){
            return scope.photoAdd
        },
        chongzhi(){
            this.getMessageList()
        },
        fabuwenzhang(){
            this.centerDialogVisible2=true
        },
        uploadSuccess (val) {
            this.noticeForm.photoAdd = val.data.fileName
        },
        insertNo(){
            var _this=this
            var url='http://taruinfo.work:8088/InsertMessage'
            _this.$axios.post(url,_this.noticeForm).then(function(res){
                if(res.data.code=='200'){
                    _this.$message({
                        message:'发布成功',
                        type:'success'
                    })

                }else{
                     _this.$message({
                        message:'发布失败',
                        type:'error'
                    })
                }
                _this.centerDialogVisible2=false
                _this.noticeForm.photoAdd = ''
                _this.noticeForm.title = ''
                _this.noticeForm.messageInfo = ''
                _this.fileList = []
                _this.getMessageList()
            })
        }
    }
}
</script>

<style lang="less" scoped>
.box-card{
    width: 1270px;
    height:615px;
    margin-top: 10px;
}
.wang-editor{
    width: 100%;
    height: 100%;
    .p{
      background: #dcddcc;
      height: 30px;
      font-size: 24px;
    }
    .editor{
      width: 800px;
      height: 300px;
      margin: 50px auto;
      text-align: left;
    }
    .editor-tool-bar{
      width: 800px;
      margin: 0 auto;
      border: 1px solid #000;
      background: #ccc;
    }
    .editor-content{
      width: 800px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #000;
      text-align: left;
    }
  }
</style>